import React, { memo, useState, useEffect } from 'react';

import './index.less';
import SvgIcon from '@/svg-icons/SvgIcon';
import {
    ipcRendererSend,
    ipcRendererOn,
    ipcRendererRemoveListener
} from '@/common/desktop-utils';
import logoImage from '@/assets/logo.png';

function DesktopHeader() {

    const [windowIsMax, setWindowIsMax] = useState(false);

    useEffect(() => {
        /**
         * 
         * @param {Event} event 
         * @param {boolean} isMax 
         */
        const handleSetIsMax = (event, isMax) => {
            setWindowIsMax(isMax);
        };
        ipcRendererOn('mainWindowIsMax', handleSetIsMax);
        return () => {
            ipcRendererRemoveListener('mainWindowIsMax', handleSetIsMax);
        };
    }, []);

    /**
     * 
     * @param {string} eventName 
     */
    const handleWindow = (eventName) => {
        ipcRendererSend(`mainWindow-${eventName}`);
    };

    return (
        <div className="desktop-header">
            <div className="header-logo-box">
                <img src={logoImage} alt="" />
                <span>Harbour</span>
            </div>
            <div className="header-handle-box">
                <div className="handle-icon-box" onClick={handleWindow.bind(this, 'min')}>
                    <SvgIcon
                        svgName="MinIcon"
                        iconColor="#737780"
                        hasHover
                        needPointer
                    />
                </div>
                <div className="handle-icon-box" onClick={handleWindow.bind(this, windowIsMax ? 'restore' : 'max')}>
                    <SvgIcon
                        svgName={windowIsMax ? 'RestoreIcon' : 'MaxIcon'}
                        iconColor="#737780"
                        hasHover
                        needPointer
                    />
                </div>
                <div className="handle-icon-box handle-close-icon" onClick={handleWindow.bind(this, 'close')}>
                    <SvgIcon
                        svgName="CloseIcon"
                        iconColor="#737780"
                        hasHover
                        needPointer
                    />
                </div>
            </div>
        </div>
    );
}

export default memo(DesktopHeader);